<template>
    <div>
        <Row :gutter="8" class="ivu-mb-8">
            <Col>
            <Select v-model="params.type" style="width:200px" @on-change="changetype" clearable>
                <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            </Col>
            <Col>
            <Button type="primary" @click="changeAdd('add',{id:''})"  v-hasC="{
                name: '-v1-search-search-search-add',
                flag: '/v1/search/search/search-add',
            }">新增</Button>
            </Col>
        </Row>
        <Table border :columns="columns" :data="data" max-height="600">
            <template slot="option" slot-scope="{row}">
                <a type="primary" @click="changeAdd('edit',row)"
                   v-hasC="{
                       name: '-v1-search-search-search-update',
                       flag: '/v1/search/search/search-update',
                }">编辑</a>
                <Divider type="vertical" 
                         v-hasC="
                         
                             {
                                 name: '-v1-search-search-search-delete',
                                 flag: '/v1/search/search/search-delete',
                             }
                         "
                ></Divider>
                <a style="color:#ed4014"  @click="deleteTag(row)"  v-hasC="{
                    name: '-v1-search-search-search-delete',
                    flag: '/v1/search/search/search-delete',
                }">删除</a>
            </template>

        </Table>
        <Modal v-model="modalStatus" :title="modalTitle" width="600" @on-cancel="handleReset(formValidate)">
            <Form ref="formValidate" :model="formData" :rules="ruleValidate" inline>
                <FormItem label="" >
                    <RadioGroup v-model="formData.type">
                        <Radio :label="1">匹配词</Radio>
                        <Radio :label="2">专业词</Radio>
                    </RadioGroup>
                </FormItem>
                <div v-if="modalTitle=='新增'">
                    <div><span>词语:</span><span style="margin-left:300px">排序</span></div>
                    <div v-for="(item, index) in formData.list"  :key="index">
                        <Row :key="index" :gutter="16">
                            <Col span="13">
                            <FormItem
                                :prop="'list.' + index + '.keyword'"
                                :rules="{required: true, message: '请输入词语', trigger: 'blur',}"
                            >
                                <Input v-model="item.keyword" placeholder="含有多个词请用/隔开"  style="width:300px"></Input>
                            </FormItem>
                            </Col>
                            <Col span="6">
                            <FormItem
                                :prop="'list.' + index + '.sort'"
                                :rules="{required: true,validator:validateconsume, trigger: 'blur',type:'number'}">
                                <InputNumber v-model="item.sort" :min="1" :max="999999"  style="width:80px"></InputNumber>
                            </FormItem>
                            </Col>
                            <Col>
                            <Button type="error" icon="md-remove" v-if="formData.list.length>1" @click="handleRemove(index)"></Button>
                            <Button v-if="index === formData.list.length-1 " type="success" icon="md-add" class="ivu-ml-8" @click="handleAdd(index)"></Button>
                        </Col>
                        </Row>
                    </div>
                </div>
                <div v-else>
                    <div><span>词语:</span><span style="margin-left:300px">排序</span></div>
                    <Row :key="index" :gutter="16">
                        <Col span="13">
                        <FormItem
                            prop="keyword"
                        >
                            <Input v-model="formData.keyword" placeholder="含有多个词请用/隔开"  style="width:300px"></Input>
                        </FormItem>
                            </Col>
                        <Col span="6">
                        <FormItem
                            prop="sort"
                            :rules="{required: true,validator:validateconsume, trigger: 'blur',type:'number'}">
                            <InputNumber v-model="formData.sort" :min="1" :max="999999"  style="width:80px"></InputNumber>
                        </FormItem>
                        </Col>
                    </Row>
                </div>
            </Form>
            <div slot="footer">
                <Button @click="handleReset(formValidate)">取消</Button>
                <Button type="primary" :loading="formloading" @click="handleSubmit(formValidate)">确定</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    import { addMatching,searchList,searchUpdate,searchDelete } from '@/api/hqapi';
    export default {
        data(){
            return {
                formValidate: 'formValidate',
                params: {type: ''},
                typeList: [
                    {
                        value: 1,
                        label: '匹配词'
                    },
                    {
                        value: 2,
                        label: '专业词'
                    },
                ],
                columns: [
                    {
                        title: '类型',
                        align: 'center',
                        key: 'type',
                        minWidth: 100,
                        render: (h,params) => {
                            return h('span',params.row.type == 1 ? '匹配词' : '专业词'); 
                        }

                    },
                    {
                        title: '搜索词',
                        align: 'center',
                        key: 'keyword',
                        minWidth: 100,

                    },
                    {
                        title: '排序',
                        align: 'center',
                        key: 'sort',
                        minWidth: 100,

                    },
                    {
                        title: '操作',
                        align: 'center',
                        slot: 'option',
                        minWidth: 100,

                    },
                ],
                data: [],
                modalStatus: false,
                formData: {
                    type: 1,
                    keyword: '',
                    sort: null,
                    list: [{
                        keyword: '',
                        sort: 1,
                    }]
                },
                ruleValidate: {
                    keyword: [ { required: true, message: '请输入词语', trigger: 'blur' }]
                },
                formloading: false,
                modalTitle: '',
                index: 1,
                num: 0
            };
        },
        methods: {
            validateconsume(rule, value, callback) {
                if(value === '') {
                    callback(new Error('排序'));
                }else {
                    // console.log(value ,'qqq')
                    if(!Number.isInteger(value)) {
                        callback(new Error('请输入整数'));
                    }
                    callback();
                }
            },
            changetype(){
                this.initial(); 
            },
            initial(){
                this._searchList();
            },
            // 获取列表
            _searchList(){
                searchList({type: this.params.type}).then(res => {
                    this.data = res;
                });
            },
            changeAdd(e, row) {
                this.modalStatus = true;
                if(e == 'add') {
                    this.modalTitle = '新增';
                }else {
                    this.modalTitle = '编辑';
                   
                    this.formData = {
                        type: row.type * 1,
                        keyword: row.keyword,
                        sort: row.sort * 1
                    };
                    this.$set(this.formData,'id',row.id);
                }
            },
            // 新增
            handleAdd(inx) {
                this.index++;
                // const num = inx + 2;
                this.formData.list.push({
                    id: '',
                    keyword: '',
                    sort: 1,
                });
            },
            // 删除
            handleRemove(index) {
                this.formData.list.splice(index, 1);
            },
            handleReset(name){
                this.$refs[name].resetFields();
                this.formData.list = [{
                    keyword: '',
                    sort: 1,
                }];
                this.modalStatus = false;
            },
            handleSubmit(name){
                this.$refs[name].validate(valid => {
                    if(valid) {
                        this.formloading = true;
                        if(this.modalTitle === '新增'){
                            const params = {
                                type: this.formData.type,
                                content: this.formData.list
                            };
                            addMatching(params).then(res => {
                                this.$Message.success('新增成功');
                                this.formloading = false;
                                this.handleReset(name);
                                this.initial();
                            }).catch(() => {
                                this.formloading = false;
                            });
                        }else {
                            const params = {
                                id: this.formData.id,
                                type: this.formData.type,
                                keyword: this.formData.keyword,
                                sort: this.formData.sort
                            };
                            searchUpdate(params).then(res => {
                                this.$Message.success('编辑成功');
                                this.formloading = false;
                                this.handleReset(name);
                                this.initial();
                            }).catch(() => {
                                this.formloading = false;
                            });
                        }
                        
                    }
                });
            },
            /* 删除 */
            deleteTag(row) {
                this.$Modal.confirm({
                    title: '删除确认',
                    content:
                        '删除后列表将不再统计此“搜索词”',
                    loading: true,
                    onOk: () => {
                        searchDelete({ id: row.id }).then(res => {
                            this.$Modal.remove();
                            this.$Message.success('删除成功');
                            this.initial();
                        });
                    }
                });
            },
        }
    };
</script>